/** @jsxImportSource @emotion/react */
import * as React from "react";
import { storiesOf } from "@storybook/react";
import {DdMenu,  DdMenuItem} from "../DropdownMenu";
import {useToast} from "../Toast";
import {useLocation} from "wouter";
import {MainMenuBar} from "../MainMenuBar";
import {DarkMode, LightRefMode} from "../Theme/Providers";
import {MenuItem, MenuList} from "../Menu";
import {Button, ButtonRefComp} from "../Button";
import {IconArrowRight, IconChevronDown, IconKey, IconMoreVertical} from "../Icons";
import {useTheme} from "../../src";
import {css} from "@emotion/react";



//测试新的库 https://floating-ui.com/docs/react-dom
export const MenuStories = storiesOf("DdMenu菜单", module)
    .add("floating-ui工具", () => {
        const theme = useTheme();
        const toast = useToast();
        return (
            <>
                <MainMenuBar  css={{
                    justifyContent: "space-between",
                    "@media print": {
                        display: 'none',
                    }
                }}
                >

                    <DdMenu label="定制菜单"

                    >
                        <DdMenuItem label="Undo" />
                        <DdMenuItem label="Redo" />
                        <DdMenuItem label="Cut-dis" disabled  onClick={ (e) => {
                            console.log("Cut-dis");
                        } } />
                        <DdMenu label="Copy as">
                            <DdMenuItem label="Text" />
                            <DdMenuItem label="Video" />
                            <DdMenu label="Image">
                                <DdMenuItem label=".png" />
                                <DdMenuItem label="是电风扇"
                                            onClick={ (e) => {
                                                console.log("Pressed!个网页2");
                                            } }
                                />
                                <DdMenuItem label=".svg" />
                                <DdMenuItem label=".gif" />
                            </DdMenu>
                            <DdMenuItem label="Audio" />
                        </DdMenu>
                        <DdMenu label="Share">
                            <DdMenuItem label="Mail" />
                            <DdMenuItem label="Instagram" />
                        </DdMenu>
                    </DdMenu>

                    <Button
                        size="xs"
                        intent="primary"
                        iconBefore={<IconArrowRight />}
                        onPress={() => {  }}
                    >
                        搜索
                    </Button>

                    <Button
                        size="xs"
                        intent="primary"
                        iconBefore={
                            <img
                                css={{
                                    marginRight: theme.spaces.sm,
                                    width: "25px",
                                    height: "25px"
                                }}
                                src={''} alt={''}
                                aria-hidden
                            />
                        }
                        onPress={() => { } }
                    >
                        待办
                    </Button>
                    <Button
                        size="xs" noBind
                        intent="primary"
                        iconBefore={<IconKey />}
                    >
                        任务
                    </Button>
                </MainMenuBar>
                <h1>Floating UI Dropdown Menu</h1>

                <DdMenu label="菜单">
                    <DdMenuItem label="Undo" />
                    <DdMenuItem label="Redo" />
                    <DdMenuItem label="Cut" disabled />
                    <DdMenu label="Copy as">
                        <DdMenuItem label="Text" />
                        <DdMenuItem label="Video" />
                        <DdMenu label="Image">
                            <DdMenuItem label=".png" />
                            <DdMenuItem label="是电风扇"
                                        onClick={ (e) => {
                                            console.log("Pressed!个网页2");
                                            toast({title: "提交一个网页链接"});
                                        } }
                            />
                            <DdMenuItem label=".svg" />
                            <DdMenuItem label=".gif" />
                        </DdMenu>
                        <DdMenuItem label="Audio" />
                    </DdMenu>
                    <DdMenu label="Share">
                        <DdMenuItem label="Mail" />
                        <DdMenuItem label="Instagram" />
                    </DdMenu>
                </DdMenu>

                <h3>ARIA Authoring Practices Guide</h3>
                <a
                    target="_blank"
                    href="https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/"
                    rel="noreferrer"
                >
                    Menu Button
                </a>
            </>
        );
    }).add("上面的工具栏", () => {
        const theme = useTheme();
        const toast = useToast();
        return (
            <>
                <MainMenuBar  css={{
                    justifyContent: "space-between",
                    position: "fixed",
                    top: 0,
                    width: "100%",
                    bottom: 'unset',
                }}
                >

                    <DdMenu label="菜单 "  icon={<IconMoreVertical />}>
                        <DdMenuItem label="Undo" />
                        <DdMenuItem label="Redo" />
                        <DdMenuItem label="Cut" disabled />
                        <DdMenu label="Copy as">
                            <DdMenuItem label="Text" />
                            <DdMenuItem label="Video" />
                            <DdMenu label="Image">
                                <DdMenuItem label=".png" />
                                <DdMenuItem label="是电风扇"
                                            onClick={ (e) => {
                                                console.log("Pressed!个网页2");
                                            } }
                                />
                                <DdMenuItem label=".svg" />
                                <DdMenuItem label=".gif" />
                            </DdMenu>
                            <DdMenuItem label="Audio" />
                        </DdMenu>
                        <DdMenu label="Share">
                            <DdMenuItem label="Mail" />
                            <DdMenuItem label="Instagram" />
                        </DdMenu>
                    </DdMenu>

                    <DarkMode>

                                <MenuList>
                                    <DdMenu label="菜w单4">
                                        <DdMenuItem label="Undo" />
                                        <DdMenuItem label="Redo" />
                                        <DdMenuItem label="Cut" disabled />
                                        <DdMenu label="Copy as">
                                            <DdMenuItem label="Text" />
                                            <DdMenuItem label="Video" />
                                            <DdMenu label="Image">
                                                <DdMenuItem label=".png" />
                                                <DdMenuItem label="是电风扇"
                                                            onClick={ (e) => {
                                                                toast({title: "提交一个网页链接"});
                                                            } }
                                                />
                                                <DdMenuItem label=".svg" />
                                                <DdMenuItem label=".gif" />
                                            </DdMenu>
                                            <DdMenuItem label="Audio" />
                                        </DdMenu>
                                        <DdMenu label="Share">
                                            <DdMenuItem label="Mail" />
                                            <DdMenuItem label="Instagram" />
                                        </DdMenu>
                                    </DdMenu>

                                    <MenuItem onPress={() => {
                                    }}>首页</MenuItem>
                                    <MenuItem onPress={() => {
                                    }}>从单位入手</MenuItem>

                                </MenuList>

                    </DarkMode>
                    <Button
                        size="xs"
                        intent="primary"
                        iconBefore={<IconArrowRight />}
                        onPress={() => {  }}
                    >
                        搜索
                    </Button>
                    <Button
                        size="xs"
                        intent="primary"
                        iconBefore={<IconChevronDown />}
                        onPress={() => {  }}
                    >
                        检验
                    </Button>
                    <Button
                        size="xs"
                        intent="primary"
                        iconBefore={
                            <img
                                css={{
                                    marginRight: theme.spaces.sm,
                                    width: "25px",
                                    height: "25px"
                                }}
                                src={''} alt={''}
                                aria-hidden
                            />
                        }
                        onPress={() => { } }
                    >
                        待办
                    </Button>
                    <Button
                        size="xs" noBind
                        intent="primary"
                        iconBefore={<IconKey />}
                    >
                        任务
                    </Button>
                </MainMenuBar>
                <h1  css={{
                    top: '30px',
                    position: 'sticky',
                }}
                >Floating UI Dropdown Menu</h1>

                <DdMenu label="菜单" icon={<IconMoreVertical />}
                        css={{
                            border: 'none',
                            background: 'royalblue',
                            color: 'red',
                            borderWidth: '5px',
                            height: '4rem'
                        }}
                >
                    <DdMenuItem label="Undo" />
                    <DdMenuItem label="Redo" />
                    <DdMenuItem label="Cut" disabled />
                    <DdMenu label="Copy as">
                        <DdMenuItem label="Text" />
                        <DdMenuItem label="Video" />
                        <DdMenu label="Image">
                            <DdMenuItem label=".png" />
                            <DdMenuItem label="是电风扇"
                                        onClick={ (e) => {
                                            console.log("Pressed!个网页2");
                                            toast({title: "提交一个网页链接"});
                                        } }
                            />
                            <DdMenuItem label=".svg" />
                            <DdMenuItem label=".gif" />
                        </DdMenu>
                        <DdMenuItem label="Audio" />
                    </DdMenu>
                    <DdMenu label="Share">
                        <DdMenuItem label="Mail" />
                        <DdMenuItem label="Instagram" />
                    </DdMenu>
                </DdMenu>

                <h3>ARIA Authoring Practices Guide</h3>
                <a
                    target="_blank"
                    href="https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/"
                    rel="noreferrer"
                >
                    Menu Button
                </a>
            </>
        );
    });

